<template>
	<view class="container">
		<!-- 诗句部分 -->
		<view class="poem-section">
			<text class="poem-line">数字镌红史</text>
			<text class="poem-line">云台耀赤心</text>
		</view>

		<!-- 文物图片框 -->
		<view class="artifact-frame">
			<image 
				src="@/static/content/1741020142937.jpeg" 
				class="artifact-image"
				mode="aspectFill"
			/>
		</view>

		<!-- 开启按钮 -->
		<view class="journey-text" @click="toLogin()">
			开启文物之旅
		</view>

		<!-- 底部胶囊装饰 -->
		<view class="decorative-capsules">
			<view class="capsule"></view>
			<view class="capsule"></view>
			<view class="capsule"></view>
		</view>
	</view>
</template>

<script setup>
	function toLogin(){
		uni.navigateTo({
			url:'/pages/Login/Login'
		})
	}
	
</script>

<style scoped lang="scss">
.container {
	height: 100vh;
	background: linear-gradient(180deg, 
		#AC0403 0%,
		#AC0403 60%,
		#FFFFFF 100%
	);
	position: relative;
	overflow: hidden;
}

.poem-section {
	position: absolute;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	
	.poem-line {
		display: block;
		font-size: 48rpx;
		color: #FFF3B0;
		line-height: 1.6;
		text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.3);
		font-family: 'STSong', serif;
		animation: fadeIn 1s ease;
	}
}

.artifact-frame {
	position: absolute;
	top: 30vh;
	left: 50%;
	transform: translateX(-50%);
	width: 400rpx;
	height: 400rpx;
	border-radius: 50%;
	background: #FFF3B0;
	box-shadow: 0 20rpx 50rpx rgba(172,4,3,0.2);
	padding: 20rpx;
	border: 10rpx solid #dd0202;
	animation: scaleIn 0.8s ease;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 8rpx solid #AC0403;
		border-radius: 50%;
	}
}

.artifact-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: #F5F5DC;
}

.journey-text {
	position: absolute;
	top: calc(30vh + 400rpx + 200rpx);
	left: 50%;
	transform: translateX(-50%);
	background: #F7E7CD;
	color: #AC0403;
	padding: 16rpx 60rpx;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 10rpx 20rpx rgba(172,4,3,0.1);
	animation: slideUp 0.8s ease;
}

.decorative-capsules {
	position: absolute;
	bottom: 200rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 40rpx;
	
	.capsule {
		width: 80rpx;
		height: 40rpx;
		background: rgba(247,231,205,0.9);
		border-radius: 60rpx;
		box-shadow: 0 10rpx 20rpx rgba(172,4,3,0.1);
		animation: capsuleFloat 3s ease-in-out infinite;
		
		&:nth-child(2) { animation-delay: 0.3s; }
		&:nth-child(3) { animation-delay: 0.6s; }
	}
}

// 动画定义
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20rpx); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
	from { transform: translateX(-50%) scale(0.8); }
	to { transform: translateX(-50%) scale(1); }
}

@keyframes slideUp {
	from { opacity: 0; transform: translate(-50%, 40rpx); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes capsuleFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20rpx); }
}
</style>
